<script setup lang="ts">
let order = ref<number>(0)
</script>

<template>
<div class="wrap">
  <div class="form">
    <label for="order">order: </label>
    <select v-model="order" name="order" id="order">
      <option value="-2">-2</option>
      <option value="-1">-1</option>
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </div>
  <div class="container">
    <div class="item">Flex Item 1</div>
    <div class="item">Flex Item 2</div>
    <div class="item">Flex Item 3</div>
    <div class="item">Flex Item 4</div>
    <div class="item">Flex Item 5</div>
    <div class="item">Flex Item 6</div>
  </div>

  <div class="container" dir="rtl">
    <div class="item">1عنصر فليكس</div>
    <div class="item">2عنصر فليكس</div>
    <div class="item">3عنصر فليكس</div>
    <div class="item">4عنصر فليكس</div>
    <div class="item">5عنصر فليكس</div>
    <div class="item">6عنصر فليكس</div>
  </div>
</div>
</template>

<style scoped lang="scss">
  .wrap {
    --order: v-bind(order);
    width: 100vw;
    min-height: 100vh;
    font-family: "Exo", Arial, sans-serif;
    background-color: #557;
    color: #fff;
    display: grid;
    grid-template-rows: min-content auto auto;
    gap: 1rem;
    padding: 1rem;
    align-items: start;
    align-content: start;
    justify-content: center;

    .form {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;

      label {
        white-space: nowrap;
        min-width: 160px;
        text-align: right;
      }

      select {
        padding: 0.25em 0.5em;
        font-size: inherit;
        min-width: 160px;
      }
    }

    .container {
      inline-size: 80vw;
      padding: 1rem;
      gap: 1rem;
      background: #fff;
      border:  3px solid #88978a;
      border-radius: 10px;
      display: flex;
      flex-wrap: wrap;
      .item {
        background: #e8f0fe;
        border: 2px solid #2938e9;
        border-radius: 4px;
        color: #000;
        padding: 1rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        inline-size: 150px;
        aspect-ratio: 1;
        &:nth-child(2) {
          background-color: #efe1ff;
        }
        &:nth-child(3) {
          background-color: #bbd7af;
          background-image: repeating-conic-gradient(
                  from 7.5deg at 50% 0,
                  transparent 0 15deg,
                  gold 0 30deg
          ),
          linear-gradient(177deg, #f11818, #f4070700);
          mix-blend-mode: difference;
          background-blend-mode: luminosity;
          text-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
          font-size: 1.2em;
          box-shadow: inset 0px 0px 0px 3px;
          order: var(--order);
        }
        &:nth-child(4) {
          background-color: #ecbbbb;
        }
        &:nth-child(5) {
          background-color: #00f0ff;
        }
        &:nth-child(6) {
          background-color: #d7af0a;
        }
      }
    }
  }
</style>
